import { createStore } from "vuex";

// 创建 store
const store = createStore({
  // 开启严格模式
  strict: true,

  /**
   * 仓库中的数据
   */
  state() {
    return {
      msg: "Hello",
      count: 1,
    };
  },

  /**
   * 基于 state 与 其他 getter 生成的 getter。可以看成组件中的 计算属性
   *
   * 必须要有返回值，不能有副作用
   */
  getters: {
    /**
     * state - 当前 state 数据
     * getters - 当前 getters 数据
     */
    msgLen(state) {
      return state.msg.length;
    },
    reverseMsg(state) {
      return state.msg.split("").reverse().join("");
    },

    reverseMsgReverse(state, getters, rootState) {
      console.log("getters", getters);
      return getters.reverseMsg.split("").reverse().join("");
    },
  },

  /**
   * 声明 mutation
   */
  mutations: {
    /**
     * state - 当前 state 数据
     * payload - commit 这个 mutation 时，传递过来的参数
     */
    changeMsg(state, payload) {
      console.log("payload", payload);
      if (payload.name) {
        state.msg = payload.name;
      } else {
        state.msg += "~";
      }
    },
  },

  actions: {},

  modules: {},
});

export default store;
